CSS Outline Offset


« Previous Next »

The outline-offset property adds space between an outline and the edge/border of an element. The space between an element and its outline is transparent.

Example


      <!DOCTYPE html>
      <html>
      <head> 
      <style> 

      p  {
        margin: 30px;
        border: 1px solid  red;
        outline: 1px solid blue;
        outline-offset:15px;

            }
                                                    
      </style> 
      </head> 
      <body> 

      <h2>The outline-offset Property</h2>

      <p>ACADEMY OF INFORMATION TECHNOLOGY.</p>
  
          </body>
          </html>
Result:
Example Image

The following example shows that the space between an element and its outline is transparent:

Example


      <!DOCTYPE html>
      <html>
      <head> 
      <style> 

      p  {
        margin: 30px;
        background:skyblue;
        border: 1px solid black;
        outline: 1px solid green;
        outline-offset:15px;

            }
                                                    
      </style> 
      </head> 
      <body> 

      <h2>The outline-offset Property</h2>

      <p>ACADEMY OF INFORMATION TECHNOLOGY.</p>
  
          </body>
          </html>
Result:
Example Image